{include file="public/header" /}
<style type="text/css">
	body{background-color: #FFF;}
	.aui-list .aui-list-item-text{padding-right: 0;}
	.aui-list .aui-list-item.list{margin-top: 10px; box-shadow: 0px 3px 11px #888888; -webkit-box-shadow:0px 3px 11px #888888;-moz-box-shadow:0px 3px 11px #888888;}
	.aui-list-item-text span i{margin-right:3px;}
	.aui-list .aui-list-item-right .icon-optimal{ font-size: 38px; position: absolute; top: -10px; right: 5px; color: #d81e06;}
	.question-content img{display: block;margin:0 auto;max-width: 320px;border:none !important;}
	.question-content * ,.question-content{color: #434343;max-width:100% !important; text-indent:0 !important; padding: 0 !important;margin: 0 !important; table-layout: fixed; word-wrap: break-word; overflow: hidden; }
	.question-content.answer-content{color: #757575 !important;}
	.praise i,.praise span{color: initial;}
	.praise.on i,.praise.on span{color: #ff6e00;}
	.aui-content-padded{padding: 0.75rem;margin:0;}
	.aui-list .aui-list-item{padding:10px 0.75rem;}
	.aui-list:before{height: 0 !important;}
	.h4{font-size: 1rem;}
	.aui-font-size-14{font-size: 0.7rem !important;}
	.aui-media-list .aui-list-item-inner{padding-right: 0;}
    .aui-list .aui-list-item:after{height: 1px !important;}
    .icon-submit:before{font-size: 1.3rem;}
</style>

<div class="aui-content wrap">
	<section class="aui-content-padded" style="border-bottom: 1px solid #e0dcdc;">
		<div class="aui-content">
		    <ul class="aui-list aui-media-list">
		        <li class="aui-list-item aui-list-item-middle" style="padding-left: 0;">
		            <div class="aui-media-list-item-inner">
		                <div class="aui-list-item-media" style="width: 4rem;">
		                    <img src="{:img($info['user_head_url'], 100, 100)}" class="aui-list-img-sm">
		                </div>
		                <div class="aui-list-item-inner">
		                    <div class="aui-list-item-text">
		                        <div class="aui-list-item-title aui-font-size-14">{$info['is_anonymous'] ? '匿名' : $info['user_name']}</div>
		                    </div>
		                    <div class="aui-list-item-text font-color">
		                        {$info['time_ago_desc']}
		                    </div>
		                </div>
		            </div>
		        </li>
		    </ul>
		    <div class="brank"></div>
			<h4 class="h4">{$info['title']}</h4>
		    <div class="brank"></div>
			<div class="aui-content question-content" style="padding-bottom:10px;color: #434343;font-size: 0.8rem;">
				{$info['content_img']}
			</div>
			<div class="aui-content" style="padding-top: 10px; padding-bottom:10px;">
				<!-- <div class="operating-area" style="text-align: right;float: left;">
					<span>{$info['category_name']}</span>
				</div> -->
	            <div class="operating-area" style="text-align: right;float: right;">
					{php} $best_count = count($best);$count = $list->total() + $best_count; {/php}
	            	<span style="color: #a0a0a0;"><i class="icon-answer"></i> {$count}</span>
	            	<span style="color: #a0a0a0;"><i class="icon-liulan"></i> {$info['update_view_num']}</span>
	            	<!-- <a href="{:url('ask_fav', array('ask_id' => $info['ask_id']))}" class="aui-btn aui-btn-danger opt-tip {$is_fav ? 'on' : ''}" on-text="已收藏" unon-text="收藏"  style="float: right;">{$is_fav ? '已收藏' : '收藏'}</a> -->
	            </div>
			</div>
		</div>
	</section>
	<div class="aui-list aui-media-list">
		<div class="aui-content aui-margin-b-15">
			{gt name="info.answer_id" value="0"}
			<ul class="aui-list aui-media-list">
		    	<li class="aui-list-item question-list-item answer-id-{$best['answer_id']}">
				    <div class="aui-media-list-item-inner">
				        <div class="aui-list-item-media" style="width: 3rem;padding-top: 10px;">
				            <img src="{:img($best['user_head_url'], 30, 30)}" class="aui-img-round aui-list-img-sm">
				        </div>
				        <div class="aui-list-item-inner">
				            <div class="aui-list-item-text">
				                <div class="aui-list-item-title aui-font-size-14">{$best['is_anonymous'] ? '匿名' : $best['user_name']}</div>
				                <div class="aui-list-item-right" style="color: #ff6e00 !important;">最佳答案</div>
				            </div>
				            <div class="question-content answer-content" style="margin-bottom: 15px;">
				                {:str_replace("<br>", "", $best['content_img'])}
				            </div>
				            <div class="aui-list-item-text">
				                <span style="color: #a0a0a0;">{$best['time_ago_desc']}</span>
				                <div>
				                	<a style="color: #a0a0a0;" class="praise opt-tip {$best['is_praise'] ? 'on' : ''}" href="{:url('Answer/praise', array('answer_id' => $best['answer_id']))}">
					                    <i class="icon-like"></i> 
					                    <span class="praise_num">{$best['praise_num']}</span>
					                </a>
					                <a style="color: initial;" class="answer-comment-{$best['answer_id']} view-comment" data-object-id="{$best['answer_id']}" data-count="{$best['comment_count']}" data-show="comment-list-{$best['answer_id']}">
					                    <i class="icon-comment-icon"></i> 
					                    <span class="comment_num comment_num-{$best['answer_id']}">{$best['comment_num'] ? $best['comment_num'] : ''}</span>
					                </a>
				                </div>
				            </div>
				            <div class="aui-list-item-text ">
				            	{gt name="best.comment_count" value="0"}
								<ul class="aui-list aui-media-list comment-list comment-list-{$best['answer_id']}">
									{volist name="best.comment_list" id="tr" key="kk"}
										<li class="aui-list-item view-comment commen-item comment-reply-{$tr['comment_id']} commen-item-{$best['answer_id']} commen-item-show commen-item-show-{$best['answer_id']}" style="padding-top: 0;padding-bottom: 0;" data-user="{:model('Comment')->getUserNameAttr($tr['user_id'])}" data-object-id="{$best['answer_id']}" data-reply-id="{$tr['comment_id']}" data-count="{$best['comment_count']}">
											<div class="aui-media-list-item-inner">
												<div class="aui-list-item-inner">
													<div class="aui-list-item-text">
														<div class="aui-list-item-title" style="color:#454545;font-size:0.5rem;">
															{notempty name="tr.reply_user_name"}
																<span class="comment-user-name" >{:model('Comment')->getUserNameAttr($tr['user_id'])}</span> 回复
																<span class="comment-user-name" >{$tr['reply_user_name']}</span> 
															{else/}
																<span class="comment-user-name" >{:model('Comment')->getUserNameAttr($tr['user_id'])}</span>
															{/notempty} 
														</div>
														<div class="aui-list-item-right" style="width: initial;color:#454545;">{$tr['time_ago_desc']} 
															{eq name="_user_id" value="$tr['user_id']"}
															<i class="icon-delete commoen-delete btn-confirm-opt" href="{:url('Comment/delete', array('comment_id' => $tr['comment_id']))}" del-class="comment-reply-{$tr['comment_id']}" msg="您确认要删除此评论？" label-class="answer-comment-{$best['answer_id']} .comment_num"></i>
															{/eq}
														</div>
													</div>
													<div class="aui-list-item-text " style="color:#454545;">{$tr['content']}</div>
												</div>
											</div>
										</li>
									{/volist}
								</ul>
								{/gt}
				            </div>
				        </div>
				    </div>
				</li>
		    </ul>
		    {/gt}
		    <ul class="aui-list aui-media-list answer-items-list">
		    	{include file="question/answer_ajax_item" /}
		    </ul>
	    	{neq name="ajax_next_page" value=""}
		    <div class="load-more" url="{$ajax_next_page}" data-to="answer-items-list">加载更多...</div>
		    {/neq}
		</div>
	</div>

	<!-- 我来回答 -->
	<div class="answer-submit" style="display: none;">
		<form class="ajax-form answer-form" loading-msg="正在登录，请稍候..." method="post" action="{:url('Answer/submit', array('ask_id' => $ask_id))}">
			<div class="" style="display: inline-block;width: 100%;padding: 10px 10px;border-bottom: 1px solid #e0dcdc;">
				<button class="aui-btn aui-btn-centel aui-margin-r-5 aui-pull-left" type="button">取消</button>
				<button class="aui-btn aui-btn-thumb aui-margin-r-5 aui-pull-right" onclick="answertoggle();">提交</button>
			</div>
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-input">
							<textarea name="content" placeholder="您的回答是" style="width: 100%;overflow-y: auto;"></textarea>
		                </div>
		            </div>
		        </li>
	            <li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							匿名
						</div>
						<div class="aui-list-item-input" style="text-align: right;">
							<input name="is_anonymous" value="1" type="checkbox" class="aui-switch" >
						</div>
					</div>
		        </li>
			</ul>
		</form>
	</div>
</div>
<!-- 评论 Start -->
<div class="aui-content-padded wap-comment" data-object-id="" data-reply-id="" data-module="" data-count=""> 
	<div class="aui-row-padded">
		<div class="aui-col-xs-11">
			<textarea id="textarea" class="comment-content" name="comment-content" placeholder="评论内容，请不要在评论里回答问题" style="resize: none; height: 36px; overflow-y: hidden;max-height: 90px;"></textarea>
		</div>
		<div class="aui-col-xs-1 aui-text-center comment-submit">
			<i class="icon-submit"></i>
		</div>
	</div>
</div>
<!-- 评论 Ended -->
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item opt-tip {$is_fav ? 'aui-active' : ''}" add-class="aui-active" href="{:url('Question/ask_fav', array('ask_id' => $info['ask_id']))}" position="footer" on-icon="icon-shoucang" unon-icon="icon-shoucang" on-text="已收藏" unon-text="收藏" tapmode >
        <i class="aui-iconfont icon-shoucang"></i>
        <div class="aui-bar-tab-label">{$is_fav ? '已收藏' : '收藏'}</div>
    </div>
    <div class="aui-bar-tab-item answer-btn" tapmode>
        <!-- <div class="aui-dot"></div> -->
        <i class="aui-iconfont icon-wodehuida"></i>
        <div class="aui-bar-tab-label">我来回答</div>
    </div>
</footer>

<style type="text/css">
	.wrap{padding-bottom: 45px;}
</style>
<!-- textarea自动高度 -->
<script>
	/**
	 * 文本框根据输入内容自适应高度
	 * @param                {HTMLElement}        输入框元素
	 * @param                {Number}                设置光标与输入框保持的距离(默认0)
	 * @param                {Number}                设置最大高度(可选)
	 */
	var autoTextarea = function (elem, extra, maxHeight) {
	    extra = extra || 0;
	    var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
	    isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
	        addEvent = function (type, callback) {
	            elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent('on' + type, callback);
	        },
	        getStyle = elem.currentStyle ? function (name) {
	            var val = elem.currentStyle[name];
	            if (name === 'height' && val.search(/px/i) !== 1) {
	                var rect = elem.getBoundingClientRect();
	                return rect.bottom - rect.top - parseFloat(getStyle('paddingTop')) - parseFloat(getStyle('paddingBottom')) + 'px';        
	            };
	                
	             return val;
	        } : function (name) {
	            return getComputedStyle(elem, null)[name];
	        },
	        minHeight = parseFloat(getStyle('height'));
	    
	    
	    elem.style.resize = 'none';
	    
	        var change = function () {
	                var scrollTop, height,
	                        padding = 0,
	                        style = elem.style;
	                
	                if (elem._length === elem.value.length) return;
	                elem._length = elem.value.length;
	                
	                if (!isFirefox && !isOpera) {
	                        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
	                };
	                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	                
	                elem.style.height = minHeight + 'px';
	                if (elem.scrollHeight > minHeight) {
	                        if (maxHeight && elem.scrollHeight > maxHeight) {
	                                height = maxHeight - padding;
	                                style.overflowY = 'auto';
	                        } else {
	                                height = elem.scrollHeight - padding;
	                                style.overflowY = 'hidden';
	                        };
	                        style.height = height + extra + 'px';
	                        scrollTop += parseInt(style.height) - elem.currHeight;
	                        document.body.scrollTop = scrollTop;
	                        document.documentElement.scrollTop = scrollTop;
	                        elem.currHeight = parseInt(style.height);
	                };
	        };
	        
	        addEvent('propertychange', change);
	        addEvent('input', change);
	        addEvent('focus', change);
	        change();
	};
</script>
<!-- textarea自动高度 Ended -->
<script type="text/javascript">
	function answertoggle(){
		$(".answer-submit").toggle();
		if($(".answer-submit").css('display') != 'none'){
			$('body,html').css({'overflow':'hidden','height':'100%'});
			$(".answer-btn").addClass('aui-active');
			$("body").append($('<div class="answer-cover"></div>'));
		}else{
			$('body,html').css({'overflow':'auto','height':'initial'});
			$(".answer-btn").removeClass('aui-active');
			$('.answer-cover').remove();
		}
	}

	/**
	 * 评论添加到body
	 * @param {[type]} object  [添加到哪]
	 * @param {[type]} centent [评论内容]
	 * @param {[type]} user    [用户名]
	 * @param {[type]} time    [时间]
	 * @param {[type]} type    [是评论还是回复] 
	 */
	function addCommentToAnswer(object_id, centent, user, reply_id, reply_user_name, time){

		var item_show  = '';
		var data_count = $(".wap-comment").attr('data-count');
			current_count = $(".comment_num-" + object_id).text();
			current_count = current_count ? parseInt(current_count) : 0;
			current_count ++;
			if(current_count > 3){
				item_show = ' commen-item-' + object_id + ' comment-item-show comment-item-show-' + object_id + '';
			}

		if(reply_user_name == ''){
			var user_name = '<span class="comment-user-name" >' + user + '</span>';
		}else{
			var user_name = '<span class="comment-user-name">' + user + '</span> 回复 <span class="comment-user-name" >' + reply_user_name + '<span>';
		}
		var html =  '<li class="aui-list-item view-comment commen-item comment-reply-'+ reply_id + ' ' + item_show + '" data-user="' + user + '" style="padding-top: 0;padding-bottom: 0;display: list-item;" data-object-id="' + object_id + '" data-reply-id="' + reply_id + '" data-count="' + current_count + '">'
					+ '<div class="aui-media-list-item-inner">'
					+ '<div class="aui-list-item-inner">'
					+ '<div class="aui-list-item-text">'
					+ '<div class="aui-list-item-title" style="color:#454545;font-size:0.5rem;">' + user_name + '</div>'
					+ '<div class="aui-list-item-right" style="width: initial;color:#454545;">' + time + '<i class="icon-delete commoen-delete btn-confirm-opt" href="{:url("Comment/delete")}?comment_id=' + reply_id + '" del-class="comment-reply-' + reply_id + '" msg="您确认要删除此评论？" label-class="comment_num-' + object_id + '.comment_num"></i></div>'
					+ '</div>'
					+ '<div class="aui-list-item-text " style="color:#454545;">'+ centent +'</div>'
					+ '</div>'
					+ '</div>'
					+ '</li>';
		var classname  = ".comment-list-" + object_id;

		$(".wap-comment").attr('data-count', current_count);
		$(".comment_num-"+ object_id).text(current_count);
		if($(classname + ' .expand').length > 0){
			$(classname + ' .expand').after(html);	
		}else{
			$(classname).prepend(html);
		}
		
		$(".wap-comment").slideToggle();
	}
		
	$(document).ready(function(){
		$(".answer-btn").on('click', function(){
			answertoggle();
		});
		$(".aui-btn-centel").on('click', function(){
			answertoggle();
		});

		// 评论显示
		$(document).on('click', '.view-comment', function(e){
			var is_show       = $(".wap-comment").css('display');
			var object_id     = $(this).attr('data-object-id');
			var reply_id      = $(this).attr('data-reply-id');
			var data_count    = $(this).attr('data-count');
				data_count    = data_count ? parseInt(data_count) : 0;
			var current_count = $(".wap-comment").attr('data-count');
				current_count = current_count ? parseInt(current_count) : 0;
			var count         = current_count > data_count ? current_count : data_count;
			var data_user     = $(this).attr('data-user');
			var data_show     = $(this).attr("data-show");
			var comment_list  = $("." + data_show).css("display");

			$(document).one('click', function(){
				$(".wap-comment").hide();
			});

			if(data_user){
				$(".comment-content").attr('placeholder', '回复 ' + data_user);
			}else{
				$(".comment-content").attr('placeholder', '评论内容，请不要在评论里回答问题');
			}
	
			if(comment_list != 'none' && !reply_id){

				if(comment_list != 'none' && $(".wap-comment").css('display') == 'none'){
					$("." + data_show).show();
					$(".wap-comment").slideToggle();
				}else{
					$(".wap-comment").hide();
					$("." + data_show).slideToggle();
				}
			}else{
				if(reply_id){
					$(".wap-comment").show();
				}else{
					$(".wap-comment").slideToggle();
				}
				$("." + data_show).slideToggle();
			}
			$(".wap-comment").attr("data-object-id", object_id);
			$(".wap-comment").attr("data-reply-id", reply_id ? reply_id : '');
			$(".wap-comment").attr('data-count', count);
			$(".comment-content").val("");
			e.stopPropagation();
		});

		// 评论提交
		$(document).on('click', '.comment-submit', function(){
			loading();
			var content   = $(".comment-content").val();
			var object_id = $(".wap-comment").attr('data-object-id');
			var reply_id  = $(".wap-comment").attr('data-reply-id');
			var module    = $(this).attr('module');
				module    = module ? module : 'ask_answer';
			if($.trim(content) == ""){
				removeLoading();
				msgbox("评论内容为空，不能提交！", 'error');
				return false;
			}

			$.ajax({
				url: "{:url('Comment/submit')}?object_id=" + object_id,
				data: 'module=' + module + '&content=' + content + "&reply_id=" + reply_id,
				type: "post",
				dataType : 'json',
				success: function(data){
					removeLoading();
					if(data.code == 1){
						msgbox(data.msg);
						addCommentToAnswer(data.data.data[0].object_id, data.data.data[0].content, data.data.data.user_name, data.data.data[0].comment_id, data.data.data.reply_user_name, data.data.data.time_ago_desc);
					}
					//有返回链接，则跳转
					if(data.url){
						jumpurl(data.url);
					}
				},
				error:function(){
					removeLoading();
					msgbox('请求失败！', 'error');
				}
			});
		});

		// 展开收起
		$(document).on('click', '.expand', function(){
			var is_active  = $(this).hasClass('active');
			var data_to    = $(this).attr("data-to");
			if(is_active){
				$(this).removeClass('active');
				$("." + data_to).fadeOut(800);
				$(this).text("展开");

			}else{
				$(this).addClass('active');
				$(this).text("收起");
				$("." + data_to).fadeIn(800);
			}
		});

		// 删除评论
		$(document).on("click", ".wap-comment", function(e){
		    e.stopPropagation();
		    e.preventDefault();
		});
	});
</script>
<script> 
	var text = document.getElementById("textarea");
	autoTextarea(text);// 调用
</script>
{include file="public/footer" /}